<template>
  <div>

    <HeadSelections></HeadSelections>

    <img class="adImg" src="./images/bgimg.png" alt="">

    <div class="breadnav" style="font-size: 16px; margin-left: 200px; margin-top: 20px">
      <span>当前位置: </span>
      <router-link to="/home">首页</router-link>
      <span> > {{ blog.title }} 正文</span>
    </div>

    <div class="box">
      <span style="text-align: center; font-size: 28px;">{{ blog.title }}</span>
      <span>
        <h5 style="margin-top: 5px; color: gray; font-size: 15px">{{ writerName }}&nbsp; {{ time }} &nbsp;原创&nbsp; 来源:汽车之家 &nbsp;地区:宜昌</h5>
      </span>
      <div id="arti">
        <article v-html="markdown" style="font-size: 15px; margin-top: 10px;"></article>
      </div>

    </div>

    <div class="boxnear">
      <span class="nearTitle">趣味资讯</span>
      <div v-for="item in others" :key="item.id">
        <span v-for="i in item" :key="i.id">
          <div style="margin-top: 15px; margin-left: 10px; font-size: 16px">
            <a :href="i.url">{{ i.title }}</a>
          </div>
        </span>
      </div>
      <div class="imgs">
        <div>
          <img class="adImg2" src="./images/img1.png" alt="">
        </div>
        <div>
          <img class="adImg3" src="./images/img2.png" alt="">
        </div>
        <div>
          <img class="adImg4" src="./images/img3.png" alt="">
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import MarkdownIt from 'markdown-it'

export default {
  components: {
    MarkdownIt
  },
  mounted() {
    window.scrollTo({
      top: 0,
      behavior: "auto"
    })
  },
  data: function () {
    return {
      blogId: '',
      blog: {
        context: '# 加载失败，文章不存在或者待审核！'
      },
      writerName: '加载失败。。',
      toolbars: {
        readmodel: true,
        subfield: false,
      },
      time: '2023',
      others: [
        [
          {
            "title": '宝马M4',
            "url": "http://101.43.12.19/#/car/detail/0"
          },
          {
            "title": '奔驰CLA家族图',
            "url": "http://101.43.12.19/#/car/detail/1"
          },
          {
            "title": '杜卡迪2022年销量',
            "url": "http://101.43.12.19/#/car/detail/4"
          }],
        [{
          "title": 'Model S用车体验',
          "url": "http://101.43.12.19/#/car/detail/5"
        },
          {
            "title": '宝马M5或不再供应国内',
            "url": "http://101.43.12.19/#/car/detail/6"
          },
          {
            "title": '海外试车',
            "url": "http://101.43.12.19/#/car/detail/7"
          }],
        [{
          "title": '纯电中大型轿车推荐',
          "url": "http://101.43.12.19/#/car/detail/8"
        },
          {
            "title": '风光蓝电E5到店',
            "url": "http://101.43.12.19/#/car/detail/0"
          },
          {
            "title": '之家试车视频',
            "url": "http://101.43.12.19/#/car/detail/1"
          }],
        [{
          "title": '朗逸购车立享底价',
          "url": "http://101.43.12.19/#/car/detail/4"
        },
          {
            "title": '雅阁购车立享底价',
            "url": "http://101.43.12.19/#/car/detail/7"
          },
          {
            "title": '全新宝马iX1将投产',
            "url": "http://101.43.12.19/#/car/detail/8"
          }],
        [{
          "title": '四川泸定地震',
          "url": "http://101.43.12.19/#/car/detail/6"
        },
          {
            "title": '蔚来手机业务进展',
            "url": "http://101.43.12.19/#/car/detail/5"
          },
          {
            "title": '新款奔驰GLE插混版谍照',
            "url": "http://101.43.12.19/#/car/detail/4"
          }]
      ]
    }
  },
  methods: {
    LoadMD() {
      this.$axios.get("/article/get", {params: {articleId: this.blogId}}).then(res => {
        if (res) {
          this.blog = res.data.data;
          this.LoadArticleName();
          this.time = this.blog.issueTime[0] + "-" + this.blog.issueTime[1] + "-" + this.blog.issueTime[2];
          //console.log(this.blog.context)
        } else {
          this.$message.error("加载失败");
        }
      });

    },
    LoadArticleName() {
      this.writerName = "@" + '用户1';
      /*this.$axios.get("/user/name", {params: {id: this.blog.clientId}}).then(res => {
        if (res) {
          this.writerName = "@" + res.data.data;
        }
      })*/
    }

  },
  computed: {
    markdown() {
      const md = new MarkdownIt();
      const result = md.render(this.blog.context)
      return result;
    }
  }, created() {
    this.blogId = this.$route.params.id;
    this.LoadMD();
  },
}
</script>


<style scoped>
.box {
  border: 2px solid rgb(249, 245, 245);
  border-radius: 5px;
  width: 55%;
  margin-top: 20px;
  margin-left: 200px;
  margin-right: 14px;
  text-align: center;
  display: inline-block;
  vertical-align: top;
}

.adImg {
  margin-left: 200px;
  width: 1119px;
  height: 90px;
}

.boxnear {
  width: 265px;
  border: 2px solid rgb(249, 245, 245);
  border-radius: 5px;
  display: inline-block;
  vertical-align: top;
  margin-top: 20px;
}

.nearTitle {
  font-size: 18px;
  margin-left: 10px;
  font-weight: 700;
  color: #333;
  position: relative;
  top: 10px;
}

.adImg2,
.adImg3,
.adImg4 {
  width: 265px;
  height: 100px;
  margin-top: 10px;
}

.imgs {
  margin-top: 20px;
}
article p{
  text-align: left;
}

</style>

